<template>
  <u-count-down :time="Times" format="DD:HH:mm:ss" @change="onChange">
    <view>{{ timeData.hours }}:{{ timeData.minutes }}:{{
      timeData.seconds
    }}</view>
  </u-count-down>
</template>

<script setup lang="ts">
import { reactive, defineProps } from "vue"
const Props = defineProps(['Times'])
const timeData = reactive<any>({
  hours: null,
  minutes: null,
  seconds: null

})
const onChange = (e: any) => {
  timeData.hours = e.hours >= 10 ? e.hours : '0' + e.hours
  timeData.minutes = e.minutes >= 10 ? e.minutes : '0' + e.minutes
  timeData.seconds = e.seconds >= 10 ? e.seconds : '0' + e.seconds

}


</script>

<style scoped></style>